<template>
  <div>
    <div>
      <h1 style="color: #181d80">{{ title }}</h1>
    </div>
    <span>
      <center><div id="c1"></div></center>
      <div id="mountNode"></div>
      <div>
        <div style="width: 500px">
          <el-tag>第一学期完成率：</el-tag
          ><el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.p1"
            status="success"
          ></el-progress>
          <el-tag>第二学期完成率：</el-tag
          ><el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.p2"
            status="success"
          ></el-progress>
          <el-tag>第三学期完成率：</el-tag
          ><el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.p3"
            status="success"
          ></el-progress>
          <el-tag>第四学期完成率：</el-tag
          ><el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.p4"
            status="success"
          ></el-progress>
        </div>
      </div>
    </span>
  </div>
</template>

<script>
import { Chart, registerInteraction } from "@antv/g2";

export default {
  name: "studentPie",
  data() {
    return {
      p1: "",
      p2: "",
      p3: "",
      p4: "",
      user: JSON.parse(window.sessionStorage.getItem("user")),
      chartOne: {
        container: "c1",
        autoFit: true,
        height: 300,
        width: 600,
      },
    };
  },

  methods: {
    test: function() {
      this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
        // Step 1: 创建 Chart 对象
        const data = this.chartOne.data;
        const chart = new Chart({
          container: this.chartOne.container, // 指定图表容器 ID
          height: this.chartOne.height,
          width: this.chartOne.width,
        });
        // Step 2: 载入数据源

        var sum1 = 0;
        var sum2 = 0;
        var sum3 = 0;
        var sum4 = 0;
        var sum = 0;

        let p1 = 0,
          p2 = 0,
          p3 = 0,
          p4 = 0;
        for (var i = 0; i < resp.length; i++) {
          sum1 += resp[i].mileageTerm1;
          sum2 += resp[i].mileageTerm2;
          sum3 += resp[i].mileageTerm3;
          sum4 += resp[i].mileageTerm4;
          sum = sum1 + sum2 + sum3 + sum4;
          if (resp[i].mileageTerm1 >= 50) p1++;
          if (resp[i].mileageTerm2 >= 50) p2++;
          if (resp[i].mileageTerm3 >= 50) p3++;
          if (resp[i].mileageTerm4 >= 50) p4++;
        }
        this.p1 = ((p1 / resp.length).toFixed(4) * 100).toFixed(2);
        this.p2 = ((p2 / resp.length).toFixed(4) * 100).toFixed(2);
        this.p3 = ((p3 / resp.length).toFixed(4) * 100).toFixed(2);
        this.p4 = ((p4 / resp.length).toFixed(4) * 100).toFixed(2);

        console.log(resp);
        const sss = [
          {
            item: name + ":第一次跑步",
            value: "第一学期" + sum1.toFixed(1),
            percent: +(sum1 / sum).toFixed(3),
          },
          {
            item: name + ":第二次跑步",
            value: "第二学期" + sum2.toFixed(1),
            percent: +(sum2 / sum).toFixed(3),
          },
          {
            item: name + ":第三次跑步",
            value: "第三学期" + sum3.toFixed(1),
            percent: +(sum3 / sum).toFixed(4),
          },
          {
            item: name + ":第四次跑步",
            value: "第四学期" + sum4.toFixed(1),
            percent: +(sum4 / sum).toFixed(2),
          },
        ];
        chart.data(sss);

        chart.coordinate("theta", {
          radius: 0.85,
        });

        chart.scale("percent", {
          formatter: (val) => {
            val = val * 100 + "%";
            return val;
          },
        });
        chart.tooltip({
          showTitle: false,
          showMarkers: false,
        });
        chart.axis(false); // 关闭坐标轴
        const interval = chart
          .interval()
          .adjust("stack")
          .position("percent")
          .color("value")
          .label("percent", {
            offset: -40,
            style: {
              textAlign: "center",
              shadowBlur: 2,
              shadowColor: "rgba(0, 0, 0, .45)",
              fill: "#fff",
            },
          })
          .tooltip("value*percent", (value, percent) => {
            percent = percent * 100 + "%";
            return {
              name: value,
              value: percent,
            };
          })
          .style({
            lineWidth: 1,
            stroke: "#fff",
          });
        chart.interaction("element-single-selected");
        chart.render();
        // 默认选择
        interval.elements[0].setState("selected", true);
      });
    },
  },

  mounted() {
    this.test();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
